<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>双预防监控大屏</title>
    <link rel="stylesheet" href="plugin/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="css/wy_layer.css"> -->
    <link rel="stylesheet" href="css/scroll.css">

    <link rel="stylesheet" href="css/wyView.css">
    <script src="plugin/layui/layui.all.js"></script>
    <style>
        .more {
            text-align: right;
            color: #fff;
            padding: 0 20px;
            font-size: 20px;
            cursor: pointer
        }

        .dataNull {
            position: absolute;
            color: #ffffff;
            top: 100px;
            left: 40%;
            font-size: 16px;
            background: #243372
        }

        .risk {
            color: #1E9FFF;
            margin: 10px 0 10px 10%;
        }

        .risk p {
            font-size: 14px;
        }

        .pro-title {
            white-space: nowrap;
        }

        .tooltipDiv {
            position: absolute;
            top: 5px;
            left: 20px;
            z-index: 99;
        }

        .square {
            border: 1px solid #fff;
            margin-top: 10px;
            font-size: 14px;
            width: 95px;
        }

        .anchorBL {
            display: none;
        }
    </style>
</head>
<body>
<div id="audioDiv" style="height:30px;width:30px;display: none"></div>
<div class="wrap-outer">
    <div class="wrap-inner">
        <div class="inner-header">
            <div class="zimu-wrap" style="display: none;">
                <span style="color:#f7f43f;margin-right:20px;vertical-align: top;">系统消息<i
                        class="layui-icon layui-icon-notice"></i></span>
                <div style="display: inline-block;overflow: hidden;margin-top:-4px;width:250px">
                    <div class="list_lh msg" style="display: inline-block;">
                        <ul id="msg">
                            <li>
                                <p><span>暂无</span><span>系统公告</span></p>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="time-wrap" style="width:560px">
                <!-- <span id="time"></span> -->
                <canvas id="canvasTime"></canvas>
            </div>
            <h2 class="wy_head_tit">双预防监控大屏</h2>
        </div>
        <div class="inner-container">
            <div class="layui-row wy-row layui-col-space10">
                <div class="wy-col-md4 layui-col-md4 layui-col-sm4 left" style="height: calc(100% + 10px);">
                    <div class="layui-row wy-row layui-col-space10">
                        <div class="wy-block layui-col-md7 layui-col-sm7">
                            <div class="kuang_bg" style="height:100%;">
                                <div class="wy-title"><span>系统完好率</span></div>
                                <div class="layui-row wy-row" style="height: 220px;">
                                    <div class=" wy-col-md4 layui-col-md4 layui-col-sm4 ">
                                        <div class="" id="deviceManage1" style="height:100%;">

                                        </div>
                                    </div>
                                    <div class=" wy-col-md4 layui-col-md4 layui-col-sm4 " style="height:100%;">
                                        <div class="" id="deviceManage2" style="height:100%;">

                                        </div>
                                    </div>
                                    <div class=" wy-col-md4 layui-col-md4 layui-col-sm4 " style="height:100%;">
                                        <div class="" id="deviceManage3" style="height:100%;">

                                        </div>
                                    </div>
                                </div>

                                <div style="height:calc(100% - 260px);">
                                    <div class="layui-row wy-row" style="border-top:2px solid rgba(23,40,90,0.8)">
                                        <div class="wy-block wy-col-md6 layui-col-md6 layui-col-sm6 flex-center"
                                             style="height:100%;">
                                            <div class="text-block">
                                                <h3>总设备数</h3>
                                                <p id="deviceTotal"></p>
                                            </div>
                                        </div>
                                        <div class="wy-block wy-col-md6 layui-col-md6 layui-col-sm6 flex-center"
                                             style="height:100%;border-left:2px solid rgba(23,40,90,0.8)">
                                            <div class="text-block" id="contracting">
                                                <h3>告警设备</h3>
                                                <p id="deviceError"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wy-block layui-col-md5 layui-col-sm5">
                            <div class="kuang_bg" style=";height:100%">
                                <div class="wy-title"><span>工单统计</span></div>
                                <div class="chart-wrap" id="workOrder" style="height: 100%;">
                                </div>
                            </div>
                        </div>
                        <div class="wy-block layui-col-md5 layui-col-sm5">
                            <div class="kuang_bg" style="height:100%">
                                <div class="wy-title"><span>风险统计</span></div>
                                <div class="" id="energy" style="height: 180px;"></div>
                                <!--<div class="energy-select">-->
                                <!--<select name="" id="energy-select" class="high-shadow"-->
                                <!--style="width:80px;height:30px">-->
                                <!--<option value="0">总共</option>-->
                                <!--<option value="1">本月</option>-->
                                <!--</select>-->

                                <!--</div>-->
                                <div style="height:calc(100% - 220px);">
                                    <div class="layui-row wy-row">
                                        <div class="wy-block wy-col-md6 layui-col-md6 layui-col-sm6 flex-center"
                                             style="height:100%;">
                                            <div class="text-block">
                                                <h3>本月风险</h3>
                                                <span id="totalEnergy"
                                                      style="color:#fff;font-size: 16px">280万</span><span
                                                    style="margin-left:6px;color:rgba(255,255,255,0.6)">个</span>
                                            </div>
                                        </div>
                                        <div class="wy-block wy-col-md6 layui-col-md6 layui-col-sm6 flex-center"
                                             style="height:100%;">
                                            <div class="text-block">
                                                <h3>本日风险</h3>
                                                <span id="dayEnergy" style="color:#fff;font-size: 16px">280万</span><span
                                                    style="margin-left:6px;color:rgba(255,255,255,0.6)">个</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="wy-block layui-col-md7 layui-col-sm5">
                            <div class="kuang_bg" style="height:100%">
                                <div class="wy-title"><span>风险情况</span></div>
                                <div class="chart-wrap" id="yearEnergy">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--地图 -->
                <div class="wy-col-md4 layui-col-md4 layui-col-sm4">

                    <div class="layui-row wy-row ">
                        <div class="kuang_bg" style="height:100%">
                            <div class="map-title">
                                <div class="map-tab "><span class="active pro-title">四色图分布</span></div>
                            </div>
                            <div class="tooltipDiv">
                                <div class="square" style="background:red">重大风险Ⅰ级</div>
                                <div class="square" style="background:orange">较大风险Ⅱ级</div>
                                <div class="square" style="background: yellow;">一般风险Ⅲ级</div>
                                <div class="square" style="background: blue;">低风险Ⅳ级</div>
                            </div>
                            <div class="chart-wrap" id="allmap" style="height: 100%!important;"></div>
                        </div>
                    </div>
                </div>
                <div class="wy-col-md4 layui-col-md4 layui-col-sm4 right" style="height: calc(100% + 20px);">
                    <div class="layui-row wy-row layui-col-space10">
                        <div class="wy-col-md6 layui-col-md6 right1">
                            <div class="layui-row wy-row layui-col-space10">
                                <div class="wy-block layui-col-md12">
                                    <div style=";height:100%">

                                        <div class="kuang_bg" style="height:100%">
                                            <div class="wy-title"><span>本月告警分布</span></div>
                                            <div class="chart-wrap" id="repair" title="点击查看详情">

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="wy-block layui-col-md12">
                                    <div class="kuang_bg" style=";height:100%">
                                        <div class="wy-title"><span>工单未处理情况</span></div>
                                        <div class="chart-wrap" style="overflow: hidden;" id="errorRealTime">
                                            <!-- 代码开始 -->
                                            <div class="list_lh_header"><p
                                                    style="border-bottom:2px solid rgba(23,40,90,0.8)"><span>工单名称</span><span>派单时间</span><span>处理内容</span>
                                            </p></div>
                                            <div class="list_lh notice">
                                                <ul id="notice">
                                                    <li>
                                                        <p><span>金泰大厦2208</span><span>灯不亮</span><span>未开始</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>富地大厦909</span><span> 门关不严</span><span>进行中</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>金泰先锋小区3号楼2单元</span><span>门禁打不开</span><span>进行中</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p><span>丽湾小区2号楼1单元1803</span><span>窗户坏了</span><span>未开始</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p>
                                                            <span>天津丽湾小区1期2号楼1单元</span><span>可视对讲没显示</span><span>已完成</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p><span>中国移动北京基地</span><span>停车场道闸轮子坏了</span><span>已完成</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p>
                                                            <span>CBD国际大厦  203</span><span>停车场道闸不落杆</span><span>未开始</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p>
                                                            <span>公测豪华礼包公测豪华礼包</span><span>公测豪华礼包公测豪华礼包</span><span>已完成</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p><span>1</span><span>灯不亮</span><span>未开始</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>2</span><span> 门关不严</span><span>进行中</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>3</span><span>门禁打不开</span><span>进行中</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>4</span><span>窗户坏了</span><span>未开始</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>5</span><span>可视对讲没显示</span><span>已完成</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>6</span><span>停车场道闸轮子坏了</span><span>已完成</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>7</span><span>停车场道闸不落杆</span><span>未开始</span></p>
                                                    </li>
                                                    <li>
                                                        <p><span>8</span><span>公测豪华礼包公测豪华礼包</span><span>已完成</span></p>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!-- 代码结束 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wy-col-md6 layui-col-md6 right2">
                            <div class="layui-row wy-row layui-col-space10">
                                <div class="wy-block layui-col-md12">
                                    <div class="kuang_bg" style=";height:100%">
                                        <div class="wy-title"><span>设备告警排行</span></div>
                                        <div class="chart-wrap" id="collectionRate"
                                             style="height:calc(100% - 70px) !important;">
                                            <div style="color:#1E9FFF;" class="risk">
                                                <p>风险名称: 水泵</p>
                                                <p>隐患总数: 10</p>
                                                <p>整改个数: 5</p>
                                            </div>
                                            <div style="color:#1E9FFF;" class="risk">
                                                <p>风险名称: 水泵</p>
                                                <p>隐患总数: 10</p>
                                                <p>整改个数: 5</p>
                                            </div>
                                        </div>

                                        <p class="collection dataNull">没有告警</p>
                                        <div class="collectionMore more" title="查看全部"><span>全部>></span></div>
                                    </div>
                                </div>
                                <div class="wy-block layui-col-md12">
                                    <div class="kuang_bg" style="height:100%">
                                        <div class="wy-title"><span>隐患整改率</span></div>
                                        <div class="chart-wrap" id="loadRate"
                                             style="height:calc(100% - 70px) !important;">
                                            <div style="color:#1E9FFF;" class="risk">
                                                <p>风险名称: 水泵</p>
                                                <p>隐患总数: 10</p>
                                                <p>整改个数: 5</p>
                                            </div>
                                            <div style="color:#1E9FFF;" class="risk">
                                                <p>风险名称: 水泵</p>
                                                <p>隐患总数: 10</p>
                                                <p>整改个数: 5</p>
                                            </div>
                                        </div>

                                        <p class="load dataNull">没有隐患</p>
                                        <div class="loadMore more" title="查看全部"><span>全部>></span></div>
                                        <!--<div class=" wy-col-md6 layui-col-md6 layui-col-sm6 " style="height:100%;">-->

                                        <!--<div class="chart-wrap" id="income" style="height: 100%;">-->

                                        <!--</div>-->

                                        <!--</div>-->
                                        <!--<div class=" wy-col-md6 layui-col-md6 layui-col-sm6 " style="height:100%;">-->
                                        <!--<div class="chart-wrap" id="income2" style="height: 100%;">-->

                                        <!--</div>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                                <div class="wy-block layui-col-md12">
                                    <div class="kuang_bg" style="background: rgba(10,15,34,.8);height:100%">
                                        <div class="wy-title"><span>巡检指标</span></div>
                                        <div class="chart-wrap wy-block layui-col-md12">
                                            <div class="layui-row wy-row">
                                                <div class="wy-block layui-col-md12" style="height: 25%">
                                                    <div class='flex-between small-title'><span>巡检完成率</span><span><i
                                                            id="q1text"
                                                            style="color:#32d953;font-size:14px;font-weight:800"></i></span>
                                                    </div>
                                                    <div id="qualityRatio0"
                                                         style="height:-webkit-calc(100% - 20px) "></div>
                                                </div>
                                                <div class="wy-block layui-col-md12" style="height: 25%">
                                                    <div class='flex-between small-title'><span>告警处理率</span><span><i
                                                            id="q2text"
                                                            style="color:red;font-size:14px;font-weight:800">差</i></span>
                                                    </div>
                                                    <div id="qualityRatio1"
                                                         style="height:-webkit-calc(100% - 20px)"></div>
                                                </div>
                                                <div class="wy-block layui-col-md12" style="height: 25%">
                                                    <div class='flex-between small-title'><span>隐患整改率</span><span><i
                                                            id="q3text"
                                                            style="color:red;font-size:14px;font-weight:800">差</i></span>
                                                    </div>
                                                    <div id="qualityRatio2"
                                                         style="height:-webkit-calc(100% - 20px)"></div>
                                                </div>
                                                <div class="wy-block layui-col-md12" style="height: 25%">
                                                    <div class='flex-between small-title'><span>随手拍处理率</span><span><i
                                                            id="q4text"
                                                            style="color:red;font-size:14px;font-weight:800">差</i></span>
                                                    </div>
                                                    <div id="qualityRatio3"
                                                         style="height:-webkit-calc(100% - 20px)"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="chart-wrap wy-block layui-col-md5" style="">-->
                                        <!--&lt;!&ndash; 项目数 &ndash;&gt;-->
                                        <!--<div id="projectNum" style="height: 100%;"></div>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script src="../../../js/common.js"></script>
<script src="../../../js/component.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/timer/digit.js"></script>
<script src="js/timer/time.js"></script>
<script src="js/scroll.js"></script>
<script src="js/index.js"></script><!-- 设备管理 -->
<script src="js/index2.js"></script><!-- 维修 -->
<!--<script src="js/index3.js"></script>&lt;!&ndash; 地图 &ndash;&gt;-->
<script src='js/index4.js'></script><!-- 本月工单 -->
<!--<script src='js/index5.js'></script>&lt;!&ndash; 需量分析 &ndash;&gt;-->
<!--<script src='js/index6.js'></script>&lt;!&ndash; 负荷分析 &ndash;&gt;-->
<!--<script src='js/index7.js'></script>&lt;!&ndash; 项目数量圆形 &ndash;&gt;-->
<script src='js/index8.js'></script><!-- 本月风险 -->
<script src='js/index9.js'></script><!-- 年度风险 -->
<script src='js/index10.js'></script><!-- 项目数量柱形比率 -->

<script type="text/javascript">
    // 地图
    // 百度地图API功能
    let marker = {};
    let map = new BMap.Map("allmap", {
        enableMapClick: false
    });
    // map.setMapStyle(SiteConfig.mapStyle)
    // convertGCJ02ToBD09 中国正常GCJ02坐标---->百度地图BD09坐标
    let xpi = Math.PI*3000.0/180.0;
    let z = Math.sqrt(SiteConfig.account.lng * SiteConfig.account.lng + SiteConfig.account.lat * SiteConfig.account.lat) + 0.00002 * Math.sin(SiteConfig.account.lat * xpi);
    let theta = Math.atan2(SiteConfig.account.lat,SiteConfig.account.lng) + 0.000003 * Math.cos(SiteConfig.account.lng * xpi);
    let lng = z * Math.cos(theta) + 0.0065;
    let lat = z * Math.sin(theta) + 0.006
    map.centerAndZoom(new BMap.Point(lng, lat), 24);
    map.enableScrollWheelZoom(true);

    $('.pro-title').html(SiteConfig.account.projectName + '四色图')
    HttpUtil.get('SceneForColor/List', {projectNo: SiteConfig.account.projectNo}).success((res) => {
        let data = res.data;
        if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
                let color = 'blue'
                switch (data[i].grade) {
                    case  1:
                        color = 'red';
                        break;
                    case  2:
                        color = 'orange';
                        break;
                    case  3:
                        color = 'yellow';
                        break;
                    case  4:
                        color = 'blue';
                        break;
                }
                let rectangle = new BMap.Polygon([
                    new BMap.Point(data[i].lng1, data[i].lat1),
                    new BMap.Point(data[i].lng2, data[i].lat2),
                    new BMap.Point(data[i].lng3, data[i].lat3),
                    new BMap.Point(data[i].lng4, data[i].lat4),
                ], {
                    strokeColor: "white",
                    strokeWeight: 2,
                    strokeOpacity: 0.5,
                    fillColor: color,
                });

                let point = getCenterPoint(rectangle.getPath());
                let label = new BMap.Label(data[i].zone_name, {
                    offset: new BMap.Size(-40, -25),
                    position: point
                });
                rectangle.addEventListener("click", function () {
                    HttpUtil.get('Patrolexcute/getRiskPercentByZone', {pagesize: 20}).success((res) => {
                        let zoneInfo = {};
                        for (let item of res.data) {
                            if (item.zone_id == data[i].zoneId) {
                                zoneInfo = item;
                                zoneInfo.grade = data[i].grade;
                            }
                        }
                        //示范一个公告层
                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: true
                            ,
                            area: '800px;'
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            anim: 1
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            content: '<div style="padding: 50px 200px; line-height: 22px; background-color: #393D49;font-size: 16px; color: #fff; font-weight: 500;">区域名称:' + zoneInfo.zone_name + '<br>隐患等级:' + zoneInfo.grade
                                + '<br>任务总数:' + zoneInfo.total + '<br>任务完成数:' + zoneInfo.finished + '<br>发现隐患数:' + zoneInfo.found + '<br>已处理隐患数:' + zoneInfo.processed + '<br>超期未处理数:' + zoneInfo.unprocessed_timeout + '</div>'
                        });
                    })
                });
                map.addOverlay(label);
                map.addOverlay(rectangle);
            }
        }
    })

    function getCenterPoint(path) {
        var x = 0.0;
        var y = 0.0;
        for (var i = 0; i < path.length; i++) {
            x = x + parseFloat(path[i].lng);
            y = y + parseFloat(path[i].lat);
        }
        x = x / path.length;
        y = y / path.length;
        return new BMap.Point(x, y);
    }

    function showDetail(e, ee, marker) {

    }
</script>

<script type="text/javascript">

    $(document).ready(function () {
        $('.msg li:even').addClass('lieven');
        $("div .msg").myScroll({
            speed: 60, //数值越大，速度越慢
            rowHeight: 40 //li的高度
        });
        let day = TimeUtil.convertToString(new Date()).substr(0, 10);
        let dArr = day.split('-');
        //设备统计
        HttpUtil.get('Analysis/getUserSummary', {UserId: SiteConfig.account.id}).success((res) => {
            res.data.totalDevices = res.data.totalDevices ? res.data.totalDevices : 0;
            res.data.totalErrorDevices = res.data.totalErrorDevices ? res.data.totalErrorDevices : 0;
            res.data.totalOnlineDevices = res.data.totalOnlineDevices ? res.data.totalOnlineDevices : 0;
            res.data.totalProjects = res.data.totalProjects ? res.data.totalProjects : 0;
            $('#deviceTotal').text(res.data.totalDevices);
            $('#deviceError').text(res.data.totalErrorDevices);
            deviceManage1.setOption(deviceChart1(res.data));
        });
        //告警
        HttpUtil.get('WorkFlow/List', {wf_processflag: 0, projectNo: SiteConfig.account.projectNo}).success((res) => {
            $('#notice').empty();
            for (let item of res.data) {
                item.wf_createtime = item.wf_createtime ? item.wf_createtime.replace('T', ' ') : '';
                $('#notice').append('<li><p><span>' + item.wf_eventName + '</span><span>' + item.wf_createtime + '</span><span style="color:red">' + item.wf_eventMsg?item.wf_eventMsg:'无' + '</span></p></li>')
            }
            $('.notice li:even').addClass('lieven');
            $("div .notice").myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 60 //li的高度
            });
            // if (res.data.length != 0)
            //     // audioPlay(0, res.data);
            // $('#errorRealTime').on('click', function () {
            //     layer.open({
            //         title: false,
            //         type: 2,
            //         shade: [0.8, '#0f0f10'],
            //         content: ['page/error_realTime.html?', 'no'],
            //         area: ['1200px', '700px']
            //     });
            // })
        });

        //循环播放tts
        function audioPlay(i, data) {
            $('#audioDiv').empty();
            let url = 'http://tts.baidu.com/text2audio/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=5&amp;text=';
            if (i >= data.length) {
                i = 0;
            }
            url += '项目' + data[i].ProjectName + '设备' + data[i].DevName + '发生' + data[i].ErrorName;
            let borswer = window.navigator.userAgent.toLowerCase();
            if (borswer.indexOf("ie") >= 0) {
                //IE内核浏览器
                let strEmbed = '<embed name="embedPlay"  src="' + url + '"  hidden="true"></embed>';
                if ($("#audioDiv").find("embed").length <= 0)
                    $("#audioDiv").append(strEmbed);
                let embed = document.embedPlay;
                //浏览器不支持 audion，则使用 embed 播放
                embed.volume = 100;
                //embed.play();
            } else {
                //非IE内核浏览器
                let strAudio = "<audio id='audioPlay'   src='" + url + "' hidden='true'>";
                if ($("#audioDiv").find("audio").length <= 0)
                    $("#audioDiv").append(strAudio);
                let audio = document.getElementById("audioPlay");
                //浏览器支持 audion
                audio.play();
                audio.addEventListener('ended', () => {
                    audioPlay(i + 1, data);
                }, false);
            }
        };
        //告警分布
        HttpUtil.get('Analysis/getUserErrorGroupSummary', {
            UserId: SiteConfig.account.id,
            year: 0,
            month: 0
        }).success((res) => {
            let data = {
                xdata: [],
                ydata: [],
                count: 0,
            }
            if (res.data.length != 0)
                for (let item of res.data) {
                    data.xdata.push(item.groupName);
                    data.ydata.push({
                        value: item.errorCount,
                        name: item.groupName,
                        Id: item.Id
                    })
                    data.count += item.errorCount;
                }
            // index2 告警
            repair.setOption(chart2(data));
            $("#repair").on('click', function () {
                layer.open({
                    title: false,
                    type: 2,
                    shade: [0.8, '#0f0f10'],
                    content: ['page/project_repair.html', 'no'],
                    area: ['1000px', '600px'],
                    success: function (layero, index) {
                        let iframe = window['layui-layer-iframe' + index];

                        HttpUtil.get('Analysis/getUserDeviceErrorGroupSummary', {}).success((res) => {

                            let chartData = {
                                errorGroup: [],
                                errorData: [],
                                deviceName: [],
                            }
                            //排序
                            for (let i in res.data) {
                                res.data[i].total = 0;
                                for (let item of res.data[i].errorData) {
                                    res.data[i].total += item.errorCount;
                                }
                            }
                            res.data.sort(keysrt('total', false, parseInt));
                            // 数据变横向
                            for (let i = 0; i < Object.keys(res.data[0].errorData).length; i++) {
                                let arry = [];
                                for (let item of res.data) {
                                    arry.push(item.errorData[i].errorCount);
                                }
                                chartData.errorData.push(arry);
                            }
                            for (let item of res.data) {
                                chartData.deviceName.push(item.DeviceName);
                                chartData.errorGroup = [];
                                for (let temp of item.errorData) {
                                    chartData.errorGroup.push(temp.errorName);
                                }
                            }
                            ;
                            console.log(chartData);
                            iframe.myChart1.setOption(iframe.deviceError(chartData));
                        })
                    }
                });
            })
        })
        //负荷概况
        HttpUtil.get('Statistics/SafetitesRiskWork', {
            UserId: SiteConfig.account.id,
            year: 0,
            month: 0
        }).success((res) => {
            let arry = res.data;
            let data = arry.map((item) => {
                return {
                    name: item.riskName,
                    value: parseFloat(item.process / item.count * 100).toFixed(2),
                    process: item.process,
                    noprocess: item.noprocess,
                    count: item.count,
                }
            })
            $('#loadRate').empty();
            data.sort(keysrt('value', true, parseFloat));
            if (data.length == 0) {
                $('.loadMore').css('display', 'none');
            } else {

                let length = data.length >= 2 ? 2 : data.length;
                for (let i = 0; i < length; i++) {
                    $('#loadRate').append('<div class="risk"><p>风险名称:' + data[i].name + '</p><p>隐患总数:' + data[i].count + '</p><p>整改个数:' + data[i].process + '</p></div>');
                }
                $('.loadMore').css('display', 'block');
            }
            if (data.length != 0) {
                $('.dataNull')[1].style.display = 'none';
                // loadRate.setOption(chart6(data));

            } else {
                $('.dataNull')[1].style.display = 'block'
            }


            //03负荷
            $(".loadMore").on('click', function () {
                layer.open({
                    title: false,
                    type: 2,
                    shade: [0.8, '#0f0f10'],
                    content: ['page/load_rate.html?data=' + JSON.stringify(data), 'no'],
                    area: ['900px', '600px'],
                    success: function (layero, index) {
                        // 获取子页面的iframe
                        let iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        let chartData = {
                            xdata: [],
                            ydata: [],
                        }
                        for (let item of data) {
                            chartData.xdata.push(item.value);
                            chartData.ydata.push({value: item.name, count: item.count, process: item.process});
                        }
                        chartData.xdata.reverse();
                        chartData.ydata.reverse();
                        iframe.loadRateChart.setOption(iframe.load(chartData));
                    }
                });
            })
        })
        //需量概况
        HttpUtil.get('Statistics/SafetitesDevErrorCount', {
            UserId: SiteConfig.account.id,
            year: 0,
            month: 0
        }).success((res) => {
            let arry = res.data;
            let data = arry.map((item) => {
                return {
                    name: item.DeviceName,
                    value: item.count,
                    DeviceID: item.DeviceID
                }
            })
            data.sort(keysrt('value', false, parseInt));
            arry.sort(keysrt('count', true, parseInt));
            $('#collectionRate').empty();
            if (data.length == 0) {
                $('.collectionMore').css('display', 'none');
            } else {

                let length = data.length >= 2 ? 2 : data.length;
                for (let i = 0; i < length; i++) {
                    $('#collectionRate').append('<div class="risk"><p>设备名称:' + arry[i].DeviceName + '</p><p>设备编码:' + arry[i].DeviceID + '</p><p>告警个数:' + arry[i].count + '</p></div>');
                }
                $('.collectionMore').css('display', 'block');
            }
            if (data.length != 0) {
                $('.dataNull')[0].style.display = 'none';
                // collectionRate.setOption(chart5(data));

            } else {
                $('.dataNull')[0].style.display = 'block'
            }

            //02<!-- 需量 -->
            $(".collectionMore").on('click', function () {
                layer.open({
                    title: false,
                    type: 2,
                    shade: [0.8, '#0f0f10'],
                    content: ['page/collection_rate.html', "no"],
                    area: ['720px', '500px'],
                    success: function (layero, index) {
                        // 获取子页面的iframe
                        let iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        let chartData = {
                            xdata: [],
                            ydata: [],
                        }
                        for (let item of data) {
                            chartData.xdata.push(item.value);
                            chartData.ydata.push(item.name);
                        }
                        iframe.collectionChart.setOption(iframe.collection(chartData));
                    }
                });
            })
        })
        //时段用量
        HttpUtil.get('Screen/dayStatictis', {}).success((res) => {
            //index9
            let chartData = {
                xdata: [],
                ydata: [],
            }
            for (let key in res.data[0]) {
                chartData.xdata.push(res.data[0][key].day);
                chartData.ydata.push(res.data[0][key].dangerous + res.data[0][key].handy);
            }
            yearEnergy.setOption(chart9(chartData));

        })
        //品质指标
        HttpUtil.get('Statistics/SafetitesSysIndex', {
            UserId: SiteConfig.account.id,
            year: 0,
            month: 0,
            day: 0
        }).success((res) => {
            //index10
            qualityRatio0.setOption(Ratio0(res.data[0].patrolRate));
            if (res.data[0].patrolRate > 0.90) {
                $('#q1text').css('color', '#32d953');
                $('#q1text').text('优')
            } else if (res.data[0].patrolRate > 0.7) {
                $('#q1text').css('color', '#d9d33c');
                $('#q1text').text('良')
            } else {
                $('#q1text').css('color', 'red');
                $('#q1text').text('差')
            }
            qualityRatio1.setOption(Ratio1(res.data[0].devErrorRate));
            if (res.data[0].devErrorRate > 0.9) {
                $('#q2text').css('color', '#32d953');
                $('#q2text').text('优')
            } else if (res.data[0].devErrorRate > 0.7) {
                $('#q2text').css('color', '#d9d33c');
                $('#q2text').text('良')
            } else {
                $('#q2text').css('color', 'red');
                $('#q2text').text('差')
            }
            qualityRatio2.setOption(Ratio2(res.data[0].patrolRate));
            if (res.data[0].patrolRate > 0.9) {
                $('#q3text').css('color', '#32d953');
                $('#q3text').text('优')
            } else if (res.data[0].patrolRate > 0.7) {
                $('#q3text').css('color', '#d9d33c');
                $('#q3text').text('良')
            } else {
                $('#q3text').css('color', 'red');
                $('#q3text').text('差')
            }
            qualityRatio3.setOption(Ratio3(res.data[0].handyRate));
            if (res.data[0].handyRate > 0.9) {
                $('#q4text').css('color', '#32d953');
                $('#q4text').text('优')
            } else if (res.data[0].handyRate > 0.7) {
                $('#q4text').css('color', '#d9d33c');
                $('#q4text').text('良')
            } else {
                $('#q4text').css('color', 'red');
                $('#q4text').text('差')
            }
        })
        var param = {};
        param.pageno = this.pageno;
        param.pagesize = this.pagesize;
        param.projectNo = SiteConfig.account.projectNo;
        //工单统计
        HttpUtil.get('Screen/workflowTypeList', param).success((res) => {
            let data = res.data
            workOrder.setOption(wfChart(data));
            deviceManage2.setOption(deviceChart2(data[2]));
            deviceManage3.setOption(deviceChart3(data[3]));

        })
        //本年、月、日风险
        HttpUtil.get('Screen/riskStatistics', {}).success((res) => {
            let data = res.data;
            let count = {
                total: 0,
                finish: 0,
                year: 0,
                month: 0,
                day: 0,
            }
            for (let item of data) {
                count.total += item.totalCounts;
                count.year += item.yearCount;
                count.month += item.monthCount;
                count.day += item.dayCount;
            }
            $('#totalEnergy').text(count.month);
            $('#dayEnergy').text(count.day);
            energy.setOption(chart8(count.year, count.total, '总共'));
        });
        //设置日期
        setInterval(function () {
            var time = new Date();
            var year = time.getFullYear(); //获取年份
            var month = time.getMonth() + 1; //获取月份
            var day = time.getDate();  //获取日期
            var hour = checkTime(time.getHours());  //获取时
            var minite = checkTime(time.getMinutes()); //获取分
            var second = checkTime(time.getSeconds()); //获取秒
            /****当时、分、秒、小于10时，则添加0****/
            function checkTime(i) {
                if (i < 10) return "0" + i;
                return i;
            }

            //setInterval(fn,i) 定时器，每隔i秒执行fn
            //var box=document.getElementById("time");
            //box.innerHTML=year+"年"+month+"月"+day+"日 "+hour+":"+minite+":"+second;
        }, 1000);
        //调整图表
        window.onresize = function () {
            deviceManage1.resize();//index
            deviceManage2.resize();
            deviceManage3.resize();
            repair.resize();//index2
            // bjMap.resize();//index3
            workOrder.resize();//index4
            // collectionRate.resize();//index5
            // loadRate.resize();//index6
            // projectNum.resize();//index7
            energy.resize();//index8
            yearEnergy.resize();//index9
            qualityRatio0.resize();//index10
            qualityRatio1.resize();
            qualityRatio2.resize();
            qualityRatio3.resize();

        }
    })

    // 排序方法
    function keysrt(filed, rev, primer) {
        rev = (rev) ? -1 : 1;
        return function (a, b) {
            a = a[filed];
            b = b[filed];
            if (typeof (primer) != 'undefined') {
                a = primer(a);
                b = primer(b);
            }
            if (a < b) {
                return rev * -1;
            }
            if (a > b) {
                return rev * 1;
            }
            return 1;
        }
    };

</script>


</html>
